<template>
  <view class="card-content">
    <u-card
      v-for="item in joinListData"
      :key="item.orgId"
      :show-head="false"
      border-radius="32"
    >
      <view slot="body">
        <view class="u-line-2" style="font-weight: bold; font-size: medium">
          {{ item.orgName }}
        </view>
        <view class="u-m-t-15 u-m-b-20 u-tips-color" style="font-size: small">
          {{ getOrgListName(item.roleList) }}
        </view>
        <u-tag
          v-if="item.accountType === 1"
          class="u-m-r-10"
          text="任职单位"
          type="error"
        ></u-tag>
        <u-tag :text="ORG_TYPE_MAP[item.orgType]" type="primary" />
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import { ORG_TYPE_MAP } from '../data';
import { joinList } from '@/api/modules/user';

const joinListData = ref<any[]>([]);
const getJoinList = () => {
  joinList().then((res: any) => {
    joinListData.value = res || [];
  });
};
getJoinList();

const getOrgListName = (orgList: any[]) => {
  const orgNames: any = [];
  orgList.forEach((item) => {
    orgNames.push(item.roleName);
  });

  return orgNames.join(',');
};
</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  padding-bottom: env(safe-area-inset-bottom);
  .card-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
